<template>
    <div>
        <div class="right_mainbox bg_white">
            <div class="margin_bottom20">
                <el-tabs type="card" v-model="activeTab"
                    closable @tab-remove="removeTab"
                    @tab-click="handleClick">
                    <el-tab-pane label="首页" name="007" closable>
                        <div class="right_mainbox2 bg_white home_box">
                            <div class="home_title">
                                <img src="../assets/images/home_title.png" alt="">
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane v-for="item in tabs" :key="item.id" :label="item.name" :name="item.id"></el-tab-pane>
                    
                </el-tabs>
                <transition name="move" mode="out-in"><router-view  id="tab-content-div"></router-view></transition>
                <div class="clear"></div>
            </div>
            
        </div>
    </div>
</template>

<script>

  export default {
    methods: {
      removeTab(tab) {
        console.log("移除tab： ", tab);
    //    if (tab)
        for (var index in this.tabs) {
            if (this.tabs.hasOwnProperty(index)) {
                var element = this.tabs[index].id;
                if(element == tab) {
                    //移除掉这个tab，并将上一个tab设置为激活状态
                    this.tabs.splice(index, 1);

                    if(index == 0) {
                        //如果关闭的标签页是第一个，并且还有剩余的标签页，则激活剩下的首个tab,并且页面跳转到这个tab内容
                        if(this.tabs.length >= 1) {
                            this.activeTab = this.tabs[index].id;
                            this.$router.push({ path: this.tabMap[this.activeTab]});
                        } else {
                            //如果关闭的是第一个tab，并且没有标签页了，则页面加载成首页面
                            this.activeTab = '007';
                            this.$router.push({ path: "/"});
                        }
                    } else {
                        //如果关闭的不是第一个tab，那么就给前一个tab设置为激活状态，这个下标-1不会影响前面的下标
                        this.activeTab = this.tabs[index - 1].id;
                        
                        this.$router.push({ path: this.tabMap[this.activeTab]});
                    }
                }
            }
        }
      },

      //切换标签
      handleClick(tab) {
        //   console.log(this.tabMap[tab.name]);
        if (tab.name != '007') {
             this.$router.push({ path: this.tabMap[tab.name]});
        } else {
            this.$router.push({ path: '/'});
        }
      }, 

      handleAddTab(id, name, url) {
            var vm = this;
            console.log("activeTab: ", vm.activeTab);
            // console.log("触发了增加tab：", vm.tabs);

            //如果当前的tabs是空的，则给点击的菜单给添加到这个数组中
            if(vm.tabs == null) {
                    console.log("不为空，添加咯！！！");
                    vm.tabs = new Array();
                    vm.tabMap = new Array();
                    // console.log("触发了增加tab：", vm.tabs);
                    vm.tabs.push({
                        name: name,
                        id: id,
                        url: url
                    });
                    vm.tabMap[id] = url;

                    vm.activeTab = id;

                    //并且路由要跳转到新页面上
                    vm.$router.push({ path: url});

                    return;
            } 

            //循环数据tabs，如果含有此id，则不再增加，只进行切换
            var isHas;

            for (var i = 0; i < vm.tabs.length; i++) {
                var tab = vm.tabs[i];
                if(tab.id == id) {
                    vm.activeTab = id;
                    isHas = true;
                    vm.$router.push({ path: url});

                    break;
                }
            }           

            if(!isHas) {

                vm.tabs.push({
                    name: name,
                    id: id,
                    url: url
                });
                vm.tabMap[id] = url;

                vm.activeTab = id;

                //并且路由要跳转到新页面上
                vm.$router.push({ path: url});
            }
        }

    },

    data() {
      return {
        tabs: null,
        activeTab: '007',
        tabMap: null,
        showMain: true
      }
    },

	created() {
        var vm = this;
        console.log("tabs: ", vm.tabs);
        console.log("tabMap: ", vm.tabMap);
        console.log("activeTab: ", vm.activeTab);
        if (vm.tabs == null) {
            vm.$router.push({ path: '/'});
        }
     //   vm.tabs = null;
      //  vm.tabMap = null;
        // vm.showMain = false;
    //    vm.handleAddTab('007', '产业园首页', '');
        console.log("添加tab页咯...");
        
		eventBus.$on('addTab', function (id, name, url) {
			vm.handleAddTab(id, name, url);
		});
	}
  }
</script>
